<template>
	<view class="box screen-all flex center">
		<image class="logo-icon" src="../../static/home_bg.png" mode="aspectFit"></image>
		<text class="logo-title">派对兔</text>
		
		<view class="content-view flex">
			<view class="input-view flex row aCenter">
				<input class="flex-1 input-text" v-model="mobile" placeholder="输入手机号" type="number"/>
			</view>
			<view class="input-view flex row aCenter">
				<input class="flex-1 input-text" :maxlength="4" v-model="code" @input="codeIndex" placeholder="输入验证码" type="number"/>
				<view class="sms-view" @click.stop="sendVerificationCode()">
					{{ codeText }}
				</view>
			</view>
			
			<view class="btn-view flex center" @click="login()">
				确认登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				
				codeText: '获取验证码',
				codeTime: 60,
				disabledCode: false,
				
				user_nickname: '',
				user_avatar: '',
				invite_code: '',
				user_user_id: '',
				user_openid: '',
			}
		},
		onLoad(opt) {
			this.user_nickname = uni.getStorageSync("user_nickname");
			this.user_avatar = uni.getStorageSync("user_avatar");
			this.user_openid = uni.getStorageSync("user_openid");
			this.user_user_id = uni.getStorageSync("user_user_id");
			this.invite_code = uni.getStorageSync("invite_code");
			
			this.type = opt.type;
		},
		methods: {
			/**
			 * 发送短信验证码
			 */
			sendCode () {
				if(this.disabledCodeBtn){return}
				this.disabledCodeBtn = true;
				let _time = this.codeTime;
				this.codeText = "("+ this.codeTime +"s)";
				this._countTime = setInterval(() => {
					_time--;
					this.codeTime = _time;
					this.codeText = "("+ this.codeTime +"s)";
					if(_time < 0){
						this.codeText = '获取验证码';
						this.disabledCodeBtn = false;
						this.codeTime = 60;
						clearInterval(this._countTime);
					}
				}, 1000);
			},
			
			sendVerificationCode () {
				if(!this.mobile){uni.showToast({title:"请输入手机号",icon:"none"}); return}
				
				uni.showLoading({
					title: "发送中..."
				})
					
				let params = {
					mobile: this.mobile,
				}
				this.$request("api/Sms/send", params)
					.then(({ code, msg, data, time }) => {
						uni.hideLoading();
						if(code == 1){
							uni.showToast({
								title: msg,icon:"success"
							})
							this.sendCode();
						}else{
							uni.showToast({
								title: msg,icon:"none"
							})
						}
					}).catch((e) => {
						uni.hideLoading();
						uni.showToast({
							title: msg,icon:"none"
						})
						console.log(e);
					});
			},
			
			login () {
				if(!this.mobile){uni.showToast({title:"请输入手机号",icon:"none"}); return}
				if(!this.code){uni.showToast({title:"请输入验证码",icon:"none"}); return}
				uni.showLoading({
					title: "登录中..."
				})
				let params = {
					// token: uni.getStorageSync("token"),
					mobile: this.mobile,
					captcha: this.code,
					nickname: this.user_nickname,
					avatar: this.user_avatar,
					table_id: this.invite_code,  //桌位id
					user_id: this.user_user_id,  //支付宝id
					openid: this.user_openid,  //微信id
				}
				console.log(params);
				this.$request("api/user/mobilelogin", params)
					.then(({ code, msg, data, time }) => {
						uni.hideLoading();
						console.log(data)
						if(code == 1){
							// 缓存token
							uni.setStorageSync("token", data.token);
							// 缓存用户身份
							uni.setStorageSync("role", data.role);
							// 缓存桌位号
							uni.setStorageSync("invite_code", params.table_id);
							
							// uni.reLaunch({
							// 	url: "../product-list/goods-list"
							// })
							this.toPages(params.table_id);
						}else{
							uni.showToast({title:msg,icon:"none"});
						}
					}).catch((e) => {
						uni.hideLoading();
						console.log(e);
					});
			},
			codeIndex (e) {
				//改为使用 maxlength
				console.log(e.target.value);
				let _text = e.target.value;
				if(_text.length > 4){
					
				}else{
					
				}
			},
			toPages (tableNumber = '') {
				if(this.type == 1){
					// 如果是在线点单直接把桌位数据清除
					uni.setStorageSync("invite_code", "");
					uni.reLaunch({
						url: "../product-list/goods-list"
					})
				} else if (this.type == 2) {
					if(tableNumber){
						uni.reLaunch({
							url: "../role-user/scan-page?tableNumber="+tableNumber,
						})
					}else{
						uni.reLaunch({
							url: "../role-user/scan-page"
						})
					}
				} else if (this.type == 3) {
					uni.reLaunch({
						url: "../role-user/user"
					})
				} else if (this.type == 4) {
					uni.reLaunch({
						url: "../role-daren/user"
					})
				} else if (this.type == 5) {
					uni.reLaunch({
						url: "../role-daren/user"
					})
				} else if (this.type == 6) {
					uni.reLaunch({
						url: "../login/admin-login"
					})
				} else if (this.type == 7) {
					uni.reLaunch({
						url: "../role-user/reserve"
					})
				} else if (this.type == 8) {
					
				} else if (this.type == 9) {
					uni.reLaunch({
						url: "../role-admin/store-wine"
					})
				} else {
					// uni.showToast({
					// 	title: '请扫描正确的桌位二维码！', icon: 'none',duration: 5000,
					// })
					uni.setStorageSync("invite_code", "");
					uni.reLaunch({
						url: "../product-list/goods-list"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.box {
		background-color: #010B24;
	}
	.logo-icon {
		width: 207rpx;
		height: 207rpx;
		margin-top: -150rpx;
		margin-bottom: 26rpx;
	}
	.logo-title {
		font-size: 32rpx;
		color: #FFF;
		font-weight: bold;
	}
	.content-view {
		width: 670rpx;
		background-color: #121C33;
		border-radius: 20rpx;
		margin-top: 38rpx;
	}
	.input-view {
		height: 100rpx;
		margin: 0 37rpx;
		border-bottom-width: 1rpx;
		border-bottom-color: #373F50;
		border-bottom-style: solid;
		margin-top: 30rpx;
	}
	.input-text {
		font-size: 28rpx;
		color: #FFF;
		font-weight: bold;
	}
	.btn-view {
		width: 592rpx;
		height: 92rpx;
		margin-top: 100rpx;
		margin-bottom: 20rpx;
		background-image: linear-gradient(to bottom, #D57FF5, #BA45E6);
		border-radius: 50rpx;
		margin-left: 43rpx;
		font-size: 30rpx;
		color: #FFF;
	}
	.btn-view:active {
		background-image: linear-gradient(to bottom, #D57FF5DD, #BA45E6DD);
	}
	.sms-view {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.sms-view:active {
		color: #FFFFFFDD;
	}
</style>
